<template>
  <view class="recommend">
    <!-- 老师引导区域 -->
    <view class="recommend__guide">
      <view class="recommend__avatar">
        <text class="recommend__avatar-emoji">👩‍🏫</text>
      </view>
      <view class="recommend__guide-content">
        <text class="recommend__guide-title">hi，我可以帮你生成学习贴~</text>
        <text class="recommend__guide-desc">请告诉我想练什么字，比如：随笔练习文、一年级必背古诗、英语单词、偏旁部首、基本笔画</text>
      </view>
    </view>

    <!-- 选择区域 -->
    <view class="recommend__selector">
      <view class="recommend__selector-header" @click="toggleExpanded">
        <text class="recommend__selector-label">大家都在问：</text>
        <text class="recommend__toggle-icon" :class="{ 'recommend__toggle-icon--expanded': isExpanded }">▼</text>
      </view>
      
      <!-- 年级选择 -->
      <view class="recommend__grade-selector">
        <view 
          v-for="grade in grades" 
          :key="grade"
          :class="['recommend__grade-item', selectedGrade === grade ? 'recommend__grade-item--active' : '']"
          @click="selectGrade(grade)"
        >
          {{ grade }}
        </view>
      </view>

      <!-- 学期选择 -->
      <view class="recommend__semester-selector">
        <view 
          v-for="semester in semesters" 
          :key="semester"
          :class="['recommend__semester-item', selectedSemester === semester ? 'recommend__semester-item--active' : '']"
          @click="selectSemester(semester)"
        >
          {{ semester }}
        </view>
      </view>
    </view>

    <!-- 推荐列表 -->
    <view class="recommend__list" v-if="currentRecommendations.length > 0" v-show="isExpanded">
      <view 
        v-for="(item, index) in currentRecommendations" 
        :key="index"
        class="recommend__list-item"
        @click="handleRecommendClick(item)"
      >
        <text class="recommend__list-text">{{ item }}</text>
        <text class="recommend__list-arrow">››</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Recommend',
  data() {
    return {
      selectedGrade: '三年级',
      selectedSemester: '上学期',
      isExpanded: true,
      grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '七年级', '八年级', '九年级'],
      semesters: ['上学期', '下学期'],
      // 推荐数据结构 - 假数据
      recommendationData: {
        '一年级': {
          '上学期': [
            '语文（识字篇）~150字',
            '必背古诗5首',
            '汉字基本笔画',
            '英语字母大小写',
            '数字书写1-10'
          ],
          '下学期': [
            '语文（拼音篇）~200字',
            '必背古诗8首',
            '汉字基本结构',
            '英语常用单词',
            '数字书写11-20'
          ]
        },
        '二年级': {
          '上学期': [
            '语文（记叙文）~300字',
            '必背古诗10首',
            '汉字偏旁部首',
            '英语简单对话',
            '汉字笔顺练习'
          ],
          '下学期': [
            '语文（看图写话）~400字',
            '必背古诗12首',
            '汉字组词练习',
            '英语单词拼写',
            '标点符号练习'
          ]
        },
        '三年级': {
          '上学期': [
            '语文（识字篇）~250字',
            '必背古诗11首',
            '语文（词语篇）',
            '英语课后单词抄红',
            '英语课后句子抄红',
            '汉字基本笔画-47个'
          ],
          '下学期': [
            '语文（作文篇）~350字',
            '必背古诗15首',
            '汉字书法练习',
            '英语短文抄写',
            '英语语法练习',
            '汉字结构分析'
          ]
        },
        '四年级': {
          '上学期': [
            '语文（说明文）~400字',
            '必背古诗18首',
            '成语书写练习',
            '英语阅读理解',
            '汉字楷书入门'
          ],
          '下学期': [
            '语文（议论文）~500字',
            '必背古诗20首',
            '文言文抄写',
            '英语作文练习',
            '汉字行书基础'
          ]
        },
        '五年级': {
          '上学期': [
            '语文（散文）~600字',
            '必背古诗25首',
            '古文名篇摘抄',
            '英语语法总结',
            '硬笔书法练习'
          ],
          '下学期': [
            '语文（小说）~700字',
            '必背古诗30首',
            '诗词名句练习',
            '英语阅读摘抄',
            '软笔书法入门'
          ]
        },
        '六年级': {
          '上学期': [
            '语文（记叙文）~800字',
            '古诗文默写练习',
            '名著经典语句',
            '英语写作练习',
            '楷书技法提升'
          ],
          '下学期': [
            '中考作文练习',
            '文言文理解',
            '现代文阅读',
            '英语综合练习',
            '书法作品创作'
          ]
        },
        '七年级': {
          '上学期': [
            '初中语文基础',
            '古诗文鉴赏',
            '现代文阅读',
            '英语语法强化',
            '规范字练习'
          ],
          '下学期': [
            '语文综合练习',
            '古文翻译练习',
            '作文素材积累',
            '英语完形填空',
            '行书技法练习'
          ]
        },
        '八年级': {
          '上学期': [
            '议论文写作',
            '古诗文默写',
            '现代文分析',
            '英语阅读理解',
            '书法艺术欣赏'
          ],
          '下学期': [
            '中考作文冲刺',
            '文言文综合',
            '语文基础知识',
            '英语写作提升',
            '个性化字体'
          ]
        },
        '九年级': {
          '上学期': [
            '中考语文冲刺',
            '古诗文总复习',
            '现代文阅读技巧',
            '英语中考真题',
            '考试字体规范'
          ],
          '下学期': [
            '中考全科复习',
            '语文答题技巧',
            '作文素材整理',
            '英语口语练习',
            '应试书写训练'
          ]
        }
      }
    }
  },
  computed: {
    currentRecommendations() {
      return this.recommendationData[this.selectedGrade]?.[this.selectedSemester] || []
    }
  },
  methods: {
    selectGrade(grade) {
      this.selectedGrade = grade
      // 触发更新推荐列表
      this.$forceUpdate()
    },
    
    selectSemester(semester) {
      this.selectedSemester = semester  
      // 触发更新推荐列表
      this.$forceUpdate()
    },
    
    toggleExpanded() {
      this.isExpanded = !this.isExpanded
    },
    
    handleRecommendClick(item) {
      // 拼接完整的练习请求
      const fullText = `${this.selectedGrade}${this.selectedSemester}${item}`
      
      // 向父组件发送选择事件
      this.$emit('recommend-select', {
        grade: this.selectedGrade,
        semester: this.selectedSemester,
        item: item,
        fullText: fullText
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.recommend {
  background: var(--paper-white);
  border-radius: 20rpx;
  margin: 20rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 16rpx var(--shadow-soft);
  border: 2rpx solid rgba(139, 69, 19, 0.1);
  
  // 引导区域
  &__guide {
    display: flex;
    align-items: flex-start;
    margin-bottom: 32rpx;
    padding-bottom: 24rpx;
    border-bottom: 2rpx solid rgba(139, 69, 19, 0.1);
  }
  
  &__avatar {
    width: 80rpx;
    height: 80rpx;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-dark) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    flex-shrink: 0;
  }
  
  &__avatar-emoji {
    font-size: 32rpx;
  }
  
  &__guide-content {
    flex: 1;
  }
  
  &__guide-title {
    display: block;
    font-size: 28rpx;
    font-weight: 500;
    color: var(--ink-black);
    margin-bottom: 12rpx;
    line-height: 1.4;
  }
  
  &__guide-desc {
    font-size: 24rpx;
    color: var(--ink-gray);
    line-height: 1.6;
  }
  
  // 选择器区域
  &__selector {
    margin-bottom: 24rpx;
  }
  
  &__selector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16rpx;
    cursor: pointer;
    padding: 8rpx 0;
    
    &:active {
      opacity: 0.7;
    }
  }
  
  &__selector-label {
    font-size: 26rpx;
    color: var(--ink-black);
    font-weight: 500;
  }
  
  &__toggle-icon {
    font-size: 20rpx;
    color: var(--ink-gray);
    transition: transform 0.3s ease;
    
    &--expanded {
      transform: rotate(180deg);
    }
  }
  
  // 年级选择器
  &__grade-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx;
    margin-bottom: 16rpx;
  }
  
  &__grade-item {
    padding: 12rpx 24rpx;
    background: var(--paper-beige);
    color: var(--ink-gray);
    font-size: 24rpx;
    border-radius: 24rpx;
    border: 2rpx solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &--active {
      background: var(--gradient-primary);
      color: var(--paper-white);
      border-color: var(--primary-dark);
      font-weight: 500;
    }
    
    &:active {
      transform: scale(0.95);
    }
  }
  
  // 学期选择器
  &__semester-selector {
    display: flex;
    gap: 12rpx;
  }
  
  &__semester-item {
    padding: 12rpx 32rpx;
    background: var(--paper-beige);
    color: var(--ink-gray);
    font-size: 24rpx;
    border-radius: 24rpx;
    border: 2rpx solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &--active {
      background: var(--gradient-primary);
      color: var(--paper-white);
      border-color: var(--primary-dark);
      font-weight: 500;
    }
    
    &:active {
      transform: scale(0.95);
    }
  }
  
  // 推荐列表
  &__list {
    animation: listSlideIn 0.4s ease-out;
  }
  
  &__list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 24rpx;
    margin-bottom: 12rpx;
    background: rgba(253, 251, 247, 0.8);
    border-radius: 16rpx;
    border: 2rpx solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      background: rgba(74, 144, 164, 0.1);
      border-color: var(--primary-light);
    }
    
    &:active {
      background: var(--primary-light);
      
      .recommend__list-text {
        color: var(--paper-white);
      }
      
      .recommend__list-arrow {
        color: var(--paper-white);
      }
    }
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  &__list-text {
    flex: 1;
    font-size: 26rpx;
    color: var(--ink-black);
    line-height: 1.4;
  }
  
  &__list-arrow {
    font-size: 24rpx;
    color: var(--ink-gray);
    margin-left: 16rpx;
    transition: color 0.3s ease;
  }
}

// 进场动画
.recommend {
  animation: recommendAppear 0.6s ease-out;
}

@keyframes recommendAppear {
  0% {
    opacity: 0;
    transform: translateY(-20rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes listSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-10rpx);
    max-height: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    max-height: 1000rpx;
  }
}

// 响应式设计
@media (max-width: 750rpx) {
  .recommend {
    margin: 16rpx;
    padding: 20rpx;
    
    &__grade-selector {
      gap: 8rpx;
    }
    
    &__grade-item,
    &__semester-item {
      font-size: 22rpx;
      padding: 10rpx 20rpx;
    }
    
    &__list-text {
      font-size: 24rpx;
    }
  }
}
</style>